<template>
  <div>
    <div>
      <van-tabs v-model="activeName">
        <van-tab title="金额智投" name="a">内容 1</van-tab>
        <van-tab title="新标专区" name="b"></van-tab>
        <van-tab title="转让专区" name="c">内容 3</van-tab>
      </van-tabs>
    </div>
    <!-- ========== -->
    <br />
    <div v-for="i in 5">
      <div class="axisoindex" v-if="activeName == 'b'">
        <div class="rowIndexcolo">
          <van-row>
            <div class="colorindexss">
              <van-col span="9">
                <font size="2"><b>小明先生第1次借款</b></font
                ><br />
                <font size="6">{{ InterestRate }}</font
                >% <br />
                <font size="2">约定借款年还利息</font>
              </van-col>
            </div>
            <div class="colorindexss" align="right">
              <van-col span="7">
                <br />
                <font size="2">360天</font><br /><br />
                <font size="2">期限</font><br />
              </van-col>
            </div>
            <div class="colorindexss" align="right">
              <van-col span="8">
                <font size="2">剩余 {{ money }} 元</font><br />
                <van-button
                  size="mini"
                  style="width: 60px; color: blue; border: 1px blue solid"
                  round
                  @click="delMoney"
                  >出借</van-button
                ><br /><br />
                <font size="2">待满30天可转让</font><br />
              </van-col>
            </div>
          </van-row>
        </div>
      </div>
    </div>
    <!-- ========== -->
    <div></div>
    <!-- ========== -->
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      activeName: "b",
      uuid: "",
      money: 2000,
      InterestRate: 10,
    };
  },
  props: {},

  components: {},

  created() {},

  mounted() {
    this.uuidDataGet();
  },

  methods: {
    // 调用uuid 消息
    uuidDataGet() {
      this.axios
        .get("/uuids", {
          params: {
            userid: localStorage.userid,
          },
        })
        .then((res) => {
          this.uuid = res.data.uuid;
          console.log("uuid的响应:", this.uuid);
        });
    },
    // 出借
    delMoney() {
      this.axios
        .post("/targetLand", {
          uuid: this.uuid,
          Userid: localStorage.userid,
          Money: this.money,
          Used: "",
          Days: "",
          InterestRate: this.InterestRate,
          RemainingAmount: "",
          EndTime: "",
          Commission: "",
        })
        .then((res) => {
          console.log("出借的响应:", res);
          this.$message({
            type: "success",
            message: res.data.msg,
          });
        });
    },
  },

  computed: {},

  watch: {},

  directives: {},

  filters: {},
};
</script>

<style scoped>
* {
  margin: 0;
}
.colorindexss {
  /* border: 1px #eee solid;
    background-color: #eee; */
}
.axisoindex {
  width: 95%;
  margin: 10px auto;
  border: 1px #aaa solid;
  border-radius: 5px;
}
.rowIndexcolo {
  margin: 10px;
}
</style>
